/*
  学习目标：评论列表-
  需求1: ✅列表渲染
*/

import React from 'react';

import './index.css';

export default class App extends React.Component {
  state = {
    // 用户名输入框
    username: '',
    // 评论内容
    content: '',
    // 1. 声明数据list
    list: [
      {
        id: 1,
        username: '撕葱',
        content: '想你的夜',
      },
      {
        id: 2,
        username: '马芸',
        content: '我对钱不感兴趣',
      },
      {
        id: 3,
        username: '王简林',
        content: '实现一个小目标',
      },
    ],
  };

  render() {
    const { list } = this.state;
    return (
      <div className="app">
        {/* 表单提交的时候，运行发布评论的函数 */}
        <form>
          <input className="user" type="text" placeholder="请输入评论人" />
          <br />
          <textarea
            className="content"
            cols="30"
            rows="10"
            placeholder="请输入评论内容"
          />
          <br />
          <button>发表评论</button>
          <button type="button">清空评论</button>
        </form>
        {/* 3. 根据list.length做条件渲染 */}
        {list.length ? (
          <ul>
            {/* 2. 列表渲染 - 插值显示 */}
            {list.map((item) => (
              // 记得要加key
              <li key={item.id}>
                <h3>评论人: {item.username}</h3>
                <p>评论内容：{item.content}</p>
                <button>删除</button>
              </li>
            ))}
          </ul>
        ) : (
          <div>暂无数据</div>
        )}
      </div>
    );
  }
}
